<template>
  <div class="history-page">
    <a-card class="history-card" title="历史解析记录">
      <a-list bordered :data-source="historyList" :pagination="{ pageSize: 5 }">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="history-item">
              <a-icon type="file-text" style="color:#1890ff;margin-right:8px;" />
              <span class="history-filename">{{ item.fileName }}</span>
              <span class="history-date">{{ item.date }}</span>
              <a-button type="link" size="small" @click="viewHistory(item)">查看结果</a-button>
            </div>
          </a-list-item>
        </template>
      </a-list>
      <a-modal v-model:visible="historyModalVisible" title="历史解析详情" :footer="null">
        <a-list bordered :data-source="historyModalData">
          <template #renderItem="{ item }">
            <a-list-item>
              <b>{{ item.title }}：</b>{{ item.content }}
            </a-list-item>
          </template>
        </a-list>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const historyList = ref([
  {
    fileName: '甲公司借款合同.pdf',
    date: new Date().toLocaleString('zh-CN', { hour12: false }),
    result: [
      { title: '关键条款', content: '约定了合同标的、服务期限、付款方式、违约责任、争议解决等。如第4条，违约责任明细由违约方承担全部损失；第5条，争议解决方式为法院诉讼。' },
      { title: '风险提示', content: '需关注违约责任条款及付款节点安排。如付款分阶段，建议明确每阶段验收标准，避免因验收或付款导致违约纠纷。' },
      { title: '注意事项', content: '核查合同主体、签署日期、附件完整性。建议双方签字盖章，附件和技术文档大文档需一并列明。' },
      { title: '法律因素', content: '涉及《合同法》《民法典》相关规定。如合同标的、违约责任、争议解决等均应合法合规约定，建议疑难事项咨询律师。' }
    ]
  },
  {
    fileName: '合同样本A.pdf',
    date: '2025-07-30 10:00:00',
    result: [
      { title: '关键条款', content: '本协议约定了双方的权利义务、违约责任、争议解决等核心内容。' },
      { title: '风险提示', content: '需注意违约条款、赔偿责任及不可抗力因素。' },
      { title: '注意事项', content: '请核对合同主体信息、签署日期及附件完整性。' },
      { title: '法律因素', content: '涉及《合同法》《民法典》相关规定，建议咨询专业律师。' }
    ]
  },
  {
    fileName: '协议范本B.docx',
    date: '2025-07-29 15:30:00',
    result: [
      { title: '关键条款', content: '本协议明确了服务内容、费用结算及终止条件。' },
      { title: '风险提示', content: '注意服务期限、违约责任及争议解决方式。' },
      { title: '注意事项', content: '核查服务范围、付款节点及双方签章。' },
      { title: '法律因素', content: '涉及《合同法》《消费者权益保护法》相关条款。' }
    ]
  }
])
const historyModalVisible = ref(false)
const historyModalData = ref([])
function viewHistory(item) {
  historyModalData.value = item.result
  historyModalVisible.value = true
}
</script>
<script>
export default {
  name: 'ProtocolHistory'
}
</script>

<style scoped>
.history-page {
  max-width: 800px;
  margin: 60px auto;
}
.history-card {
  min-height: 400px;
  background: #f7faff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e6f7ff;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.history-filename {
  font-weight: 500;
  color: #1890ff;
}
.history-date {
  color: #888;
  margin-left: 12px;
  font-size: 13px;
}
</style>